<script setup lang="ts">
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

const target = ref<null | HTMLImageElement>(null)

const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
  if (isIntersecting) {
    target.value!.src =
      'https://img1.baidu.com/it/u=3217543765,3223180824&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1660237200&t=8c207bb504220eebeacdfa0954a076d4'
    stop()
  }
})
const isAloo = ref(false)
</script>

<template>
  <div class="box">图片懒加载</div>
  <div>
    <button @click="isAloo = !isAloo">切换</button>
  </div>
  <XtxMessage></XtxMessage>
  <transition>
    <img ref="target" src="" alt="" v-show="isAloo" />
  </transition>
</template>

<style scoped>
.box {
  height: 10px;
}
img {
  width: 200px;
  height: 200px;
}
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active {
  transition: all 2s linear;
}
.v-leave-active {
  transition: opacity 1s linear;
}

.v-enter-from {
  opacity: 0;
  width: 300px;
  height: 300px;
}
.v-leave-to {
  opacity: 0;
}
</style>
